<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
         .user{
             color:green;
             cursor: pointer;
         }
    </style>
    <title>聊天室</title>
</head>
<body>
<div class="container" style="margin-top:30px">
  <div class="row">
      <div class="col-md-8 col-md-offset-2">
          <div class="panel panel-default">
              <div class="panel-heading">
                   <h2 class="text-center">欢迎光临聊天室</h2>
                   <div class="row">
                      <div class="col-xs-6 text-center">
                        <button class="btn btn-danger" id="joinRed" onclick="join('Red')">进入红房间</button>
                        <button style="display: none" class="btn btn-danger" id="leaveRed" onclick="leave('Red')">离开红房间</button>
                      </div>
                      <div class="col-xs-6 text-center">
                          <button class="btn btn-success" id="joinGreen" onclick="join('Green')">进入绿房间</button>
                          <button style="display: none" class="btn btn-success" id="leaveGreen" onclick="leave('Green')">离开绿房间</button>
                      </div>
                   </div>
              </div>
              <div class="panel-body">
                <ul style="height:300px;overflow-y: scroll" onclick="clickUser(event)" class="list-group" id="messageList">

                </ul>
              </div>
              <div class="panel-footer">
                <div class="row">
                    <div class="col-md-10">
                        <input onkeyup="handleKeyUp(event)" id="textMsg" type="text" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button onclick='sendMsg()' id="sendBtn" class="btn btn-primary">发言</button>
                    </div>
                </div>
              </div>
          </div>
      </div>
  </div>
</div>  
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>
<script>
  let textMsg = document.querySelector('#textMsg');
  let sendBtn = document.querySelector('#sendBtn');
  let messageList = document.querySelector('#messageList');


  let socket = io.connect('/');
  socket.on('connect',function(){
    socket.emit('getAllMessages');
  });
  socket.on('allMessages',function(messages){
    let html = messages.map(msgObj=>`<li class="list-group-item">${getMessage(msgObj)}</li>`).join('');
    messageList.innerHTML = html;
    messageList.scrollTop = 500;
  });
  function getMessage(msgObj){
   return `<span class="user">${msgObj.username}</span>:${msgObj.content}<span class="pull-right">${moment(msgObj.createAt).fromNow()}</span>`;
  }
  socket.on('message',function(msgObj){
    let li = document.createElement('li');
    li.innerHTML = getMessage(msgObj);
    li.className = 'list-group-item';
    messageList.appendChild(li);
    messageList.scrollTop = 500;
  });
  function handleKeyUp(event){
    if(event.keyCode == 13){
        sendMsg();
    }
  }
  function sendMsg(){
      let content = textMsg.value;
      if(content){
        socket.send(content);
        textMsg.value='';
      }else{
        alert('消息不能为空');
      }
  }
  function clickUser(event){
    if(event.target.className=='user'){
        textMsg.value = `@${event.target.innerText} `;
    }
  }
  //加入某个房间
  function join(roomName){
    //告诉服务器让我的服务器端对应的socket进入到某个房间内
    socket.emit('join',roomName);
  }
  socket.on('joined',function(roomName){
    let joinBtn = document.querySelector('#join'+roomName);
    let leaveBtn = document.querySelector('#leave'+roomName);
    joinBtn.style.display = 'none';
    leaveBtn.style.display = 'inline-block';
  });
  function leave(roomName){
    socket.emit('leave',roomName);
  }
  socket.on('leaved',function(roomName){
    let joinBtn = document.querySelector('#join'+roomName);
    let leaveBtn = document.querySelector('#leave'+roomName);
    joinBtn.style.display = 'inline-block';
    leaveBtn.style.display = 'none';
  })
</script>
</body>
</html>